<template>
  <div class="menu-container">
    <a-menu
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        mode="inline"
        theme="dark"
        :items="items"
    ></a-menu>
  </div>
</template>

<script setup lang="ts">
import { Menu as AMenu } from 'ant-design-vue'
import { reactive, h } from 'vue';
import { useRouter, RouteRecordRaw } from 'vue-router'
import { DesktopOutlined } from '@ant-design/icons-vue';

const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: ['sub1'],
});
function getMenu(routes: RouteRecordRaw[]): any[] {
  let arr: any[] = []
  routes.map(item => {
    if (item.meta && item.meta.title && !item.children) {
      let itemRoute = {
        key: item.path,
        label: item.meta.title,
        title: item.meta.title,
        // icon: () => h(item.meta&&item.meta.icon ? item.meta.icon : DesktopOutlined)
        icon: item.meta && item.meta.icon ? (() => h(item.meta.icon)) : null
      }
      arr.push(itemRoute)
    } else if (item.meta && item.meta.title && item.children) {
      let itemRoute = {
        key: item.path,
        label: item.meta.title,
        title: item.meta.title,
        children: getMenu(item.children),
        // icon: () => h(item.meta&&item.meta.icon ? item.meta.icon : DesktopOutlined)
        icon: item.meta && item.meta.icon ? (() => h(item.meta.icon)) : null
      }
      arr.push(itemRoute)
    }
  })
  return arr
}
let routes = useRouter().getRoutes()
console.log(routes);
let menuArr = getMenu(routes)
console.log(menuArr);
let items = reactive(menuArr)

</script>

<style scoped>
.menu-container{
  position: relative;
  max-width: 256px;
  float: left;
}
.toggleBtn{
  position: absolute;
  right: -50px;
  top: 0;
}
</style>